<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>



<meta content="en" http-equiv="Content-Language"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><title>Sortable Demo</title>

<link title="Flora (Default)" media="screen" type="text/css" href="../../../themes/flora/flora.all.css" rel="stylesheet"/>
<link type="text/css" href="css/style.css" rel="stylesheet"/>

<!--<script src="../../../jquery/src/core.js" type="text/javascript"/>
<script src="../../../jquery/src/selector.js" type="text/javascript"/>
<script src="../../../jquery/src/event.js" type="text/javascript"/>
<script src="../../../jquery/src/ajax.js" type="text/javascript"/>
<script src="../../../jquery/src/fx.js" type="text/javascript"/>
<script src="../../../jquery/src/offset.js" type="text/javascript"/>
<script src="../../../plugins/dimensions/jquery.dimensions.js" type="text/javascript"/>

<script src="../ui.mouse.js" type="text/javascript"/>
<script src="../ui.sortable.js" type="text/javascript"/>
<script src="../ui.sortable.ext.js" type="text/javascript"/>-->

<script src="Scripts/jQuery/jquery-1.2.2.js" type="text/javascript"></script>
<script src="Scripts/jQuery/ui/ui.mouse.js" type="text/javascript"></script>
<script src="Scripts/jQuery/ui/ui.draggable.js" type="text/javascript"></script>
<script src="Scripts/jQuery/ui/ui.droppable.js" type="text/javascript"></script>
<script src="Scripts/jQuery/ui/ui.sortable.js" type="text/javascript"></script>
<script src="Scripts/jQuery/interface.js" type="text/javascript"></script>
<script src="Scripts/jQuery/jquery.dimensions.js" type="text/javascript"></script>
<style type="text/css">
.hover { background: #000; }
</style></head><body class="flora">

<h2>1. Default, no options</h2>
<div class="playground">
	<ul style="cursor: pointer; float: left; position: relative;" id="example1" class="ui-sortable">
		<li id="ex_1">Drag us</li><li style="visibility: visible;">positions</li>
		
		
		<li style="visibility: visible;">our</li><li id="ex_4">our</li>
		<li id="ex_5">positions</li>
	</ul>
	
	<ul style="cursor: pointer; float: left; position: relative;" id="example1_2" class="ui-sortable">
		
		<li style="visibility: visible;">and change</li><li style="visibility: visible;">Drag us</li><li>around</li>
		<li id="ex_3" style="visibility: visible;">and change</li>
		<li id="ex_2" style="visibility: visible;">around</li>
		
	</ul>
	<br style="clear: both;"/>
	<button onclick="$('#example1').enableSortable()">Enable</button>
	<button onclick="$('#example1').disableSortable()">Disable</button>
	<button onclick="alert($('#example1').changeSortable('serialize'))">Serialize!</button>
</div>

<h2>2. Default, no options (Floats)</h2>
<div class="playground">
	<ul style="list-style-position: inside; height: 30px; cursor: pointer; position: relative;" id="example2" class="ui-sortable">
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Drag us</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">around</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">and change</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">our</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">positions</li>
	</ul>
</div>

<h2>3. Nested lists</h2>
<div class="playground">
	<ul style="cursor: pointer; position: relative;" id="example3" class="ui-sortable">
		<li>Drag us</li>
		<li>around</li>
		
		<li style="visibility: visible;">our</li>
		<li>positions
			<ul>
			    <li>Something else</li>
			    <li>Foo bar</li>
			</ul>
		</li><li style="visibility: visible;">and change
			<ul>
			    <li>Lorem</li>
			    <li>Ipsum</li>
			</ul>
		</li>
	</ul>
</div>

<h2>4. Floating, proxy class</h2>
<div class="playground">
	<ul style="list-style-position: inside; height: 30px; cursor: pointer; position: relative;" id="example4" class="ui-sortable">
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Drag us</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">around</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">and change</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">our</li>
		<li style="border: 1px solid rgb(187, 187, 187); margin: 3px; padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">positions</li>
	</ul>
</div>

<script type="text/javascript">
if(!window.console) {
 window.console = {
 	log: function() {
 		alert(arguments[0]);	
 	}	
 }	
}

$(window).bind("load",function(){


	$("#example1").makeSortable({ connectWith: ['#example1_2'], revert: true, containment: 'document' });
	$("#example1_2").makeSortable({ connectWith: ['#example1'] });
	
	$("#example2").makeSortable();
	$("#example3").makeSortable({ items: "li" });
	$("#example4").makeSortable({ hoverClass: "hover" });

});
</script>
</body></html>